<template>
  <div>
    <template v-if="signalMap.includes(field)">
      <signal :value="value" v-bind="$attrs"></signal>
    </template>
    <template v-else-if="triangleMap.includes(field)">
      <template v-if="+value > 0">
        <svg-icon
          :icon-class="value == 1 ? 'triangle-s' : 'triangle-e'"
        ></svg-icon>
      </template>
      <div v-else>停止</div>
    </template>
    <template v-else-if="doorMap.includes(field)">
      <svg-icon :icon-class="value === 1 ? 'door-o' : 'door-c'"></svg-icon>
      <span style="marginLeft: 6px">
        {{ value == 1 ? "开门到位" : "关门到位" }}
      </span>
    </template>
    <template v-else-if="progressMap.includes(field)">
      <div class="progress-w">
        <div
          class="progress"
          :style="{ width: value + '%', backgroundColor: color }"
        ></div>
      </div>
      <span style="marginLeft: 6px"> {{ value }}% </span>
    </template>
    <template v-else>
      <span v-if="color" :style="{ color }">{{ value }}</span>
      <span v-else>{{ value }}</span>
    </template>
  </div>
</template>

<script>
import signal from "@/components/CTag/signal.vue";
const signalMap = ["riskRatingCurrent", "riskRatingInitial"]; //初始风险  当前风险
const triangleMap = ["di"];
const doorMap = ["od"];
const progressMap = ["hu"];
export default {
  name: "panelDisplay.vue",
  components: {
    signal,
  },
  props: {
    field: {
      type: String,
      default: "",
    },
    value: {},
    color: "",
  },
  data() {
    return {
      signalMap,
      triangleMap,
      doorMap,
      progressMap,
    };
  },
};
</script>
<style lang="scss" scoped>
.progress-w {
  width: 66px;
  height: 16px;
  border-radius: 8px;
  background: #e7e7e7;
  padding: 2px;
  .progress {
    border-radius: 8px;
    height: 12px;
  }
}
</style>
